<template>
	<view class="dati_3__page">

		<view class="top__group">
			<view class="title__item">{{cname}}</view>
			<view class="num_group">
				<text>共 {{count}} 道题</text>
				<text> ,已练习 {{doNum}} 道, 其中</text>
				<text>错误 {{errNum}} 道</text>
			</view>
		</view>

		<template v-if="count>0">

			<template v-if="showA">
				<QShowCard :nowQ="nowShowQ" :checked="nowCheck"></QShowCard>
				<image v-if="!testComplete" @click="next" class="submit-btn__item" src="../../static/next__item.png"></image>
			</template>

			<template v-if="!showA">
				<qCard :nowQ="nowQ" @change="changeHandler"></qCard>
				<image @click="submit" class="submit-btn__item" src="../../static/submit__item.png"></image>
			</template>

		</template>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				qids: 0,
				cname: '',
				tests: null,
				doNum: 0,
				errNum: 0,
				nowCheck: 0,
				showA: false,
			};
		},
		computed: {
			count() {
				try {
					return this.tests.length
				} catch (e) {
					return 0
				}
			},
			nowQ() {
				try {
					return this.tests[this.doNum];
				} catch (e) {
					return {}
				}
			},
			nowShowQ() {
				try {
					return this.tests[this.doNum - 1];
					// return this.tests[this.doNum];
				} catch (e) {
					return {}
				}
			},
			testComplete() {
				try {
					return this.tests.length === this.doNum;
				} catch (e) {
					return true
				}
			}
		},
		onLoad(option) {
			this.qids = option.qids;
			this.cname = option.cname;
			this.gettestbyidsAPI();
		},
		methods: {
			changeHandler(result) {
				this.nowCheck = result;
			},
			submit() {
				this.$https({
					url: '/wechat/questionnote',
					data: {
						qid: this.nowQ.qid,
						isright: this.nowQ.right == this.nowCheck ? 1 : 0
					}
				})
				console.log('刚刚做的题', this.nowQ)
				this.showA = true;
				this.doNum++;
				console.log('显示刚刚做的题', this.nowShowQ)
				console.log('刚才做的题的正确答案', this.nowShowQ.right)
				console.log('用户选择的答案', this.nowCheck)
				if (this.nowQ && this.nowShowQ.right != this.nowCheck) { // 如果答错
					this.errNum++;
				}
			},
			next() {
				this.nowCheck = 0;
				this.showA = false;
			},
			async gettestbyidsAPI() {
				const [err, res] = await this.$https({
					url: '/wechat/gettestbyids',
					method: 'POST',
					data: {
						qids: this.qids
					}
				})
				console.log('当前的集合题目', res.data.data);
				this.tests = res.data.data;
				return res;
			}
		}
	}
</script>

<style lang="scss">
	.dati_3__page {
		min-height: 100vh;
		background-color: #F1F1F1;

		.top__group {
			padding: 20px;
			background-color: #fff;
			text-align: center;
		}

		.title__item {
			font-size: 24px;
		}

		.num_group {
			margin-top: 20px;

			text:nth-child(1) {
				color: $miva-color-base;
			}

			text:nth-child(3) {
				color: $miva-color-base;
			}
		}

		.submit-btn__item {
			width: 100vw;
			height: calc(100vw / (864 / 236));
		}

	}
</style>
